<template>
  <div class="fixed-footer">
    <el-row>
      <el-col :span="7">
        <div class="grid-content ep-bg-purple" @click="selectPage('/')">
          <div>
            <el-icon style="    padding-top: 0.4em;" size="1.5em"><Reading /></el-icon>
          </div>
          <div>
            <el-text  class="mx-1" type="info" style="line-height:1em;">首页</el-text>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content ep-bg-purple" @click="selectPage('mqtt')">
          <div>
            <el-icon style="    padding-top: 0.4em;" size="1.5em"><Reading /></el-icon>
          </div>
          <div>
            <el-text  class="mx-1" type="info" style="line-height:1em;">mqtt</el-text>
          </div>
        </div>
      </el-col>
      <el-col :span="7" >

        <div class="grid-content ep-bg-purple" @click="selectPage('user')">
          <div>
            <el-icon style="    padding-top: 0.4em;"  size="1.5em"><User /></el-icon>
          </div>
          <div>
            <el-text  class="mx-1" type="info" style="line-height:1em;">个人</el-text>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {User,Reading} from "@element-plus/icons-vue"
import {useRoute, useRouter} from "vue-router";
const router=useRouter();
const route=useRoute();
const selectPage=(i)=>{
  if (i===route.path){
    return
  }
  router.push(i)
}
</script>

<style scoped>

.fixed-footer {
  margin-top: auto;
  bottom: 0px; /* 始终贴紧底部 */
  width: 100%; /* 全宽 */
  position: sticky;
}
.ep-bg-purple {
  text-align: center;
}
.grid-content {
  background: #f8f8f8;
  min-height: 36px;
}
.mx-1{
  line-height:1px;
}
</style>